<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

export default {
  mixins: [EchartsMixins],
  data() {
    return {
      charts: '',
      xAngleList: [],
      yList: [],
      xyList: [],
      timerList: [],
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        title: {
          text: this.monitorName ,
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '70px',
          right: '80px',
          bottom: '50px'
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              contentArr.push(Format(new Date(data.value[0])))
              // data.seriesName + '值：'
              contentArr.push(data.marker + '降雨强度：'  + data.value[1]+'mm')

            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },
        },

        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            showMaxLabel:true,
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
            },
          }
        },
        yAxis: {
          name: '降雨强度(mm)',
          type: 'value'
        },

        series: [

          {
            name: this.monitorName,
            type: 'line',
            smooth: true,


            symbol: 'none',
            data: this.xAngleList,
            areaStyle: {
              normal: {
                color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0.1, color: '#0600ff' // 0% 处的颜色
                  }, {
                    offset: 0.3, color: '#1c85ff' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#00f2fd' // 100% 处的颜色
                  }]
                )
              }
            },

            itemStyle: {

              normal: {
                color: '#1c85ff',
                lineStyle: {
                  width: 1,
                  color: '#1c85ff'
                }
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    updateEchart(data, titleName) {
      this.monitorName = titleName
      this.xAngleList = data
      this.charts.clear()
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
